<template>
    <div class="sign_container">
        <div>
            <img src="../assets/head.png" width="1500" />
        </div>
        <div class="head">
            <div class="title">
                <span style="font-size: 38px">注册</span>
            </div>
            <div class="sign_box">
                <!-- 注册表单区域 -->
                <el-form
                    ref="signFormRef"
                    :model="signForm"
                    status-icon
                    :rules="signFormRules"
                    label-width="100px"
                    class="sign_form"
                >
                    <el-form-item label="昵称" prop="nickname">
                        <el-input v-model="signForm.nickname"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" prop="userid">
                        <el-input v-model="signForm.userid"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input
                            type="password"
                            v-model="signForm.password"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPassword">
                        <el-input
                            type="password"
                            v-model="signForm.checkPassword"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="头像" prop="header">
                        <el-upload
                            action="#"
                            :limit="1"
                            clearFiles
                            list-type="picture-card"
                            :auto-upload="false"
                            :on-progress="upload"
                        >
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{ file }">
                                <img
                                    class="el-upload-list__item-thumbnail"
                                    :src="file.url"
                                    alt=""
                                />
                            </div>
                        </el-upload>
                    </el-form-item>
                    <!-- 按钮区域 -->
                    <el-form-item class="btns">
                        <el-button type="success" @click="upload ,sign">注册</el-button>
                        <el-button type="warning" @click="resetSignForm"
                            >重置</el-button
                        >
                        <el-button type="primary" @click="signout"
                            >退出</el-button
                        >
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="foot"></div>
    </div>
</template>
<script>
export default {
    data() {
        //验证确认密码是否合法
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.signForm.password) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            //注册表单的数据绑定对象
            signForm: {
                nickname: "",
                userid: "",
                password: "",
                checkPassword: "",
                header: "(" + this.randonNub(1) + ").png",
                token: this.randomStr(80),
            },
            //注册表单的验证规则对象
            signFormRules: {
                //验证昵称是否合法
                nickname: [
                    { required: true, message: "请输入昵称", trigger: "blur" },
                    {
                        min: 3,
                        max: 8,
                        message: "长度在 3 到 8 个字符",
                        trigger: "blur",
                    },
                ],
                //验证用户名是否合法
                userid: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur",
                    },
                    {
                        min: 3,
                        max: 10,
                        message: "长度在 3 到 10 个字符",
                        trigger: "blur",
                    },
                ],
                //验证密码是否合法
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    {
                        min: 6,
                        max: 15,
                        message: "长度在 6 到 15 个字符",
                        trigger: "blur",
                    },
                ],
                //验证确认密码是否合法
                checkPassword: [
                    { required: true, message: "请确认密码", trigger: "blur" },
                    { validator: validatePass, trigger: "blur" },
                ],
                //验证头像是否合法
                //header: [{ required:true}],
            },
        };
    },
    methods: {
        //上传方法
        upload(event, file, fileList){
            console.log(event);

            console.log(file);
            console.log(fileList);
        },
        //随机头像
        randonNub(len) {
            var str = "";
            var dict1 = "01";
            var dict2 = "0123456789";
            var index1 = Math.floor(Math.random() * dict1.length);
            var index2 = Math.floor(Math.random() * dict2.length);
            if (index1 == 1) {
                str += dict1[index1];
            }
            str += dict2[index2];

            return str;
        },
        //随机生成token
        randomStr(len) {
            var str = "";
            var dict =
                "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-";
            for (var i = 0; i < len; i++) {
                var index = Math.floor(Math.random() * dict.length);
                str += dict[index];
            }
            return str;
        },
        //点击重置按钮  重置注册表单
        resetSignForm() {
            // console.log(this);
            this.$refs.signFormRef.resetFields();
            this.$message({ message: "表单已重置！", type: "warning" });
        },
        //注册预验证
        sign() {
            this.$refs.signFormRef.validate((valid) => {
                console.log(valid);
                if (valid == true) {
                    //调用post接口
                    this.$api.__api_list_users_post(this.signForm).then();
                    //返回注册成功
                    this.$message({ message: "注册成功！", type: "success" });
                    this.$router.push("/login");
                } else {
                    this.$message.error("请完善您的信息！");
                }
            });
        },
        //退出注册页面
        signout() {
            window.sessionStorage.clear();
            this.$router.push("/login");
        },
    },
};
</script>
<style scoped>
.sign_container {
    width: 1500px;
    margin: auto;
}
.head {
    margin: auto;
    left: 0;
    width: 1100px;
}

.title {
    /* padding-top: 2.5%; */
    text-align: center;
    border-bottom: 2px solid rgb(17, 15, 15);
    height: 40px;
}
.title span {
    height: 56px;
    line-height: 76px;
    margin: 0 auto;
    padding: 0 20px;
    font-size: 40px;
    background: #fff;
    text-align: center;
}
.sign_box {
    width: 650px;
    height: 600px;
    border-radius: 3px;
    position: relative;
    padding-top: 80px;
    margin: auto;
    left: -25px;
    /* transform: translate(635px, 200px); */
}
.btns {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}
</style>